<template>
	<div class="sale">		
		<div v-if="sale && sale.length > 0">
			<div class="order-list" v-for="(item, index) in sale" :key="index">
				<div class="top">
					<p><em>{{item.buy_user}}</em> 购买了{{item.title}}</p>
				</div>
				<div class="goods">
					<div class="img">
						<img :src="item.img">
					</div>
					<div class="title">
						<p class="tip">{{item.title}}</p>
						<p class="price">¥{{item.total}}</p>
					</div>
					<div class="num">x{{item.buy_num}}</div>
				</div>
				<div class="bottom">
					<p class="price">总计金额： ￥{{item.should_pay}}</p>
					<p class="time">{{item.create_time | formatDate}}</p>
				</div>
			</div>
		</div>
		<div class="none" v-else>
			<img src="@/assets/kongzhuangtai.png" alt="">
		</div>
	</div>
</template>

<script type="text/javascript">
	import { my_sales } from '@/api/api'
	import { formatDate } from '@/util/date.js'
	export default {
		filters:{
	    formatDate(time){
	      let date = new Date(time*1000);
	      return formatDate(date,'yyyy.MM.dd');
	      //此处formatDate是一个函数，将其封装在common/js/date.js里面，便于全局使用
	    }
		},
	  components: {
	  },
	  data () {
	    return {
	    	sale: [],
	    }
	  },
	  created () {
	  	this.mySale()
	  },
	  methods: {    
	    router (path) {
	      this.$router.push(path)
	    },
	    onItemClick (index) {
	    	console.log(index)
	    },
	    mySale () {
	    	my_sales().then((res) => {
	    		this.sale = res.data.info
	    	}).catch((err) => {
	    		console.log(err)
	    	})
	    }
	  }
	}
</script>

<style lang="stylus">
	
.sale
	background-color #fff
	min-width 100vw
	min-height 100vh
	.none
		img			
			width 15.4rem
			position absolute
			left 50%
			margin-left -7.7rem
			top 50%
			margin-top -9.6rem
	.order-list
		background-color #fff
		margin-bottom 1rem
		.top
			line-height 4.5rem
			height 4.5rem
			overflow hidden
			padding 0 1.5rem
			p
				width 70%
				white-space nowrap
				overflow hidden
				text-overflow ellipsis
				font-size 1.5rem
				em
					color #FF659B
		.goods
			display flex
			background-color #fff
			margin-bottom 1rem
			padding 2rem 0
			margin 0 1.5rem
			border-top 1px solid #e5e5e5
			border-bottom 1px solid #e5e5e5
			.img
				width 10rem
				height 7.5rem
				margin-right 1.4rem
				img
					width 100%
					height 100%
					display block
			.title
				position relative
				max-width 17.5rem
				min-width 17.5rem
				.tip
					font-size 1.5rem
					color #333
					font-weight 500
				.price
					color #FF659B
					font-size 1.3rem
					line-height 1.6rem
					position absolute
					bottom 0px
			.num
				flex 1
				text-align right
				line-height 2.1rem
				font-size 1.5rem
				font-weight 500
		.bottom
			line-height 4.5rem
			color #333
			font-size 1.5rem
			padding 0 1.5rem
			display flex
			.price
				font-size 1.5rem
				color #333
				flex 1
			.time
				font-size 1.5rem
				color #999
				text-align right
				flex 1
</style>